<template>
	<view class="my-page-con"> 
	<view class="my-page-content ">
		<view class="my-title">上传房源照片</view>
		<view class="grey-tips mb20">
			该页面上传的图片将展示于房源封面轮播图，请上传高清图片，建议像素大于700*400，并确保图片上无水印、无logo、无联系方式。单张图片大小不超过10M。长按图片可拖动排序。如遇到问题，请进入「我的」联系平台客服
		</view>
		<ljs-dragImages
			v-model="cover.list"
			:colCount="1"
			:count="1"
			:imgHeight="389"
			@uploadFile="upload($event, cover)"
			:key="1"
			>
		</ljs-dragImages>
	
		 <view v-for="(item, index) in formData" :key="index">
			  <view class="my-s-title">
				  {{item.title}}
				  <span class="grey-tips ml10">{{item.list.length}}/10</span> 
				  <view class="grey-tips ">
				   {{item.tips}}
				  </view>
			 </view>
			
			  	<ljs-dragImages
			  		v-model="item.list"
			  		@uploadFile="upload($event, item)"
			  		>
			  	</ljs-dragImages>
		 </view>
		
	</view>
	
	
    </view>
		
</template>

<script>
	export default {
		props: {
			imgList: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				cover: {
					type: 'cover',
					 list: []
				},
				formData: [
					 {
						 type: 'outdoors',
						 title: '户外',
						 tips: '至少上传1张，可以展示庭院、露台、社区环境等',
						 minCount: 1,
						 list: []
					},
					{
						 type: 'living',
						 title: '客厅',
						 tips: '至少上传1张，尽量展示客厅全景',
						 minCount: 1,
						 list: []
					},
					{
						 type: 'bedroom',
						 title: '卧室',
						 tips: '至少上传2张，尽量展示卧室全景，包括床铺、室内卫生间',
						 minCount: 2,
						 list: []
					},
					{
						 type: 'kitchen',
						 title: '厨房',
						 tips: '至少上传1张，展示厨房配套设施',
						 minCount: 1,
						 list: []
					},
					{
						 type: 'bathroom',
						 title: '卫生间',
						 tips: '至少上传1张，展示卫生间配套设施',
						 minCount: 1,
						 list: []
					},
					{
						 type: 'other',
						 title: '其他',
						 tips: '非必传，可以上传餐厅、洗衣房等其他空间照片',
						 minCount: 0,
						 list: []
					}
				]
				
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			  init() {
					this.getFormData();
			  },
			  getFormData() {
				  console.log( this.imgList, ' this.imgList')
				  let types = this.formData.map(item =>item.type);
				  this.imgList.forEach((item) =>{
					  item.url = item.image_url;
					   if(item.type == 'cover') {
						   this.cover.list.push(item);
					   }
					   let index = types.indexOf(item.type);
					   if(index > -1) {
						   this.formData[index].list.push(item);
					   }
				  });
			  },
			  upload(files, item) {
			      let num = 0;
				  let totalNum = 0;
				  uni.showLoading({
				  	title: '上传中',
					mask: true // 显示透明遮罩
				  });
				  item.list.forEach((i,index, arr)=>{{
					 
					  if(!i.image_path) {
						  const fileUrl = i.url;
						  totalNum += 1;
						  const data = [
							   { 
									name: 'file',
									url:  fileUrl
							   },
							   {
								   type: 'facility'
							   }
						  ];
						  this.$uploadFile(...data).then(res =>{
							  console.log(num, 'num')
							    num +=1;
								if(num ==  totalNum) {
									uni.hideLoading();
									this.$forceUpdate();
								}
							   item.list[index].image_path = res.filepath;
							   // console.log(this.formData);
						  })
						  
						  
						  
					  }
					  
				  }})
				
				
			  },
			  checkData() {
				  let tips = '';
				  for(let i = 0; i< this.formData.length; i++) {
					  if( this.formData[i].list.length <   this.formData[i].minCount ) {
						  tips = `${this.formData[i].title} 至少上传${this.formData[i].minCount}张照片`
						  break;
					  }
				
				  }
				  if(this.cover.list.length == 0) {
					    tips = `房源封面至少上传1张照片`
				  }
				  return tips
			  },
			  nextStep() {
				  console.log(this.formData);
				  let tips = this.checkData();
				  if(tips) {
					 this.$toast(tips);
					return false;
				   }
				   let list = [];
				   list.push(
				   	{
				   		type: this.cover.type,
				   		image_path: this.cover.list[0].image_path,
						image_url: this.cover.list[0].url,
						url:  this.cover.list[0].url,
						title: this.cover.title
				   	}
				   )
				   this.formData.forEach(item =>{
					    item.list.forEach(i=>{
							list.push(
								{
									type: item.type,
									image_path: i.image_path,
									url: i.url,
									image_url:  i.url,
									title: item.title
								}
							)
						});
				   });
				   
				
				   
				   
				  return list;
				  
			  }
		}
	}
</script>

<style>
	
</style>